<template>
  <div class="home">
    <!-- <div class="header"></div> -->
    <div class="modelList">
      <a-card title="模型查看器展示">
        <a-card-grid
          style="width: 25%; text-align: center; padding: 5px"
          v-for="model in modellist"
          :key="model.id"
          class="model"
        >
          <div class="image" @click="renderModel(model)">
            <img alt="example" :src="model.fileData.modelImage" />
          </div>

          <a-card-meta :title="model.fileData.resourceName">
            <template slot="description">
              <div
                class="modelDownload"
                @click="download(model.fileData.modelUrl)"
              >
                {{ model.fileData.modelUrl }}
              </div>
            </template>
          </a-card-meta>
        </a-card-grid>
      </a-card>
    </div>
    <!-- 模型查看器 -->
    <modelviewer
      ref="modelviewerCom"
      v-if="modalViewerFlag"
      :model="model"
      @close="closemodelViewer"
    ></modelviewer>
  </div>
</template>
<script>
import modelviewer from '../modelview/Modelviewer.vue';
export default {
  name: 'home',
  data() {
    return {
      modalViewerFlag: false,
      model: null,
      modellist: [],
    };
  },
  components: {
    modelviewer,
  },
  mounted() {
    //     fileData:Object
    // modelUrl:"http://localhost:8080/models/卡车"
    // resourceName:"卡车"
    // resourceType:"glb"
    // type:Array[1]
    // 0:"glb"
    // id:"65.39160641116237"
    // imgUrl:"./models/卡车/index.png"
    // modeldownLoadUrl:"http://localhost:8080/models/卡车/卡车.glb"
    let files = [
      {
        id: String(Math.random() * 1000),
        fileData: {
          resourceName: 'Dump Truck',
          modelImage:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Dump Truck.png',
          modelUrl:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Dump Truck.glb',
          resourceType: 'glb',
          type: ['glb'],
        },
      },{
        id: String(Math.random() * 1000),
        fileData: {
          resourceName: 'Forming volcanoes',
          modelImage:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Forming volcanoes.png',
          modelUrl:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Forming volcanoes.glb',
          resourceType: 'glb',
          type: ['glb'],
        },
      },
      // {
      //   id: String(Math.random() * 1000),
      //   fileData: {
      //     resourceName: 'Mid-size skyscrapers 3',
      //     modelImage:
      //       'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Mid-size skyscrapers 3.png',
      //     modelUrl:
      //       'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Mid-size skyscrapers 3.glb',
      //     resourceType: 'glb',
      //     type: ['glb'],
      //   },
      // },
      {
        id: String(Math.random() * 1000),
        fileData: {
          resourceName: 'Ocean Freighter',
          modelImage:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Ocean Freighter.png',
          modelUrl:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Ocean Freighter.glb',
          resourceType: 'glb',
          type: ['glb'],
        },
      },{
        id: String(Math.random() * 1000),
        fileData: {
          resourceName: 'OTree with Falling Leaves',
          modelImage:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Tree with Falling Leaves.png',
          modelUrl:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Tree with Falling Leaves.glb',
          resourceType: 'glb',
          type: ['glb'],
        },
      },{
        id: String(Math.random() * 1000),
        fileData: {
          resourceName: 'Yeah!',
          modelImage:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Yeah!.png',
          modelUrl:
            'https://mp-685bc1ea-153a-4e3a-b73d-04e321bf95a9.cdn.bspapp.com/models/Yeah!.glb',
          resourceType: 'glb',
          type: ['glb'],
        },
      }
    ];
    this.modellist = files;
  },
  methods: {
    renderModel(model) {
      this.modalViewerFlag = true;
      this.model = model;
    },
    download(url) {
      window.open(url);
    },
    closemodelViewer() {
      this.modalViewerFlag = false;
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .header {
    width: 100%;
    text-align: center;
    color: red;
    border-bottom: 1px solid #ccc;
  }
  .modelList {
    padding: 10px;
    .image {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      margin-bottom: 5px;
      img {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .modelDownload {
      cursor: default;
      color: rgb(33, 118, 222);
    }
    .modelDownload:hover {
      color: rgb(233, 79, 79);
    }
  }
  .modelviewBox {
    margin-top: 100px;
    width: 900px;
    height: 500px;
    background-color: #ccc;
  }
}
</style>
